import { NodeSize } from '../config'

export default function splitFieldToRows(flow) {
  flow.register('SplitFieldToRows', ({ PolygonNode, PolygonNodeModel, h }) => {
    class Node extends PolygonNode {
      getIconShape() {
        return h(
          'svg',
          {
            width: NodeSize,
            height: NodeSize,
            viewBox: '0 0 1024 1024'
          },
          h(
            'path',
            {
              fill: '#0CB20F',
              d: 'M316.708571 674.669714l47.640381 47.640381h-61.756952a84.358095 84.358095 0 0 1-84.260571-84.260571v-15.555048h-46.32381v15.555048a130.730667 130.730667 0 0 0 130.584381 130.584381h61.756952L316.708571 816.274286l32.768 32.768 103.570286-103.570286-103.570286-103.570286-32.768 32.768zM316.708571 207.725714l47.640381 47.640381h-61.756952a130.730667 130.730667 0 0 0-130.584381 130.584381v15.555048h46.32381v-15.555048a84.358095 84.358095 0 0 1 84.260571-84.260571h61.756952l-47.640381 47.640381 32.768 32.768 103.570286-103.570286-103.570286-103.570286L316.708571 207.725714z'
            }
          ),
          h(
            'path',
            {
              fill: '#EFF9FE',
              d: 'M601.84381 662.332952h199.411809v106.593524h-199.411809zM601.84381 642.096762h199.411809v0.707048h-199.411809zM601.84381 253.269333h199.411809v110.348191h-199.411809z'
            }
          ),
          h(
            'path',
            {
              fill: '#3D6480',
              d: 'M560.39619 211.821714v598.528h282.307048V211.821714H560.39619z m240.859429 151.79581h-199.411809v-110.348191h199.411809v110.348191z m0 140.824381h-199.411809v-121.319619h199.411809v121.319619z m-199.411809 157.891047h199.411809v106.593524h-199.411809v-106.593524z m199.411809-19.529142h-199.411809v-118.832762h199.411809v118.832762z'
            }
          )
        )
      }

      getLabelShape() {
        return h(
          'text',
          {
            fill: '#000000',
            fontSize: 12,
            x: NodeSize / 2,
            y: NodeSize + 20,
            textAnchor: 'middle',
            dominantBaseline: 'middle'
          },
          '列拆分成多行'
        )
      }

      getShape() {
        const { x, y, width, height } = this.getAttributes()
        const transform = `matrix(1 0 0 1 ${x - width / 2} ${y - height / 2})`
        return h(
          'g',
          {
            transform
          },
          [
            h(
              'rect',
              {
                rx: 5,
                ry: 5,
                width: NodeSize,
                height: NodeSize,
                fill: '#fff',
                stroke: '#3D6380',
                strokeWidth: 1
              }
            ),
            this.getIconShape(),
            this.getLabelShape()
          ]
        )
      }
    }
    class Model extends PolygonNodeModel {
      constructor(data, graphModel) {
        super(data, graphModel)
        this.points = [
          [NodeSize / 2, 0],
          [NodeSize, NodeSize / 2],
          [NodeSize / 2, NodeSize],
          [0, NodeSize / 2]
        ]
      }
    }

    return {
      view: Node,
      model: Model
    }
  })
}
